<template>
  <div class="ar-archives">
    <el-row>
      <el-col :span="24">
        <section class="section">
          <section class="content conents">
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-width="100px"
              label-position="left"
            >
              <el-form-item label="所属应用">
                <el-select
                  v-model="modelDate.app"
                  placeholder="全部"
                  class="sel-sel sel-a mr10 it350"
                >
                  <el-option
                    v-for="item in appList"
                    :key="item.app_alias"
                    :label="item.app_name"
                    :value="item.app_alias"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input
                  v-model="modelDate.createName"
                  placeholder="请输入用户名"
                  class="query-el-input input-all mr10 it350"
                ></el-input>
              </el-form-item>

              <el-form-item label="创建时间">
                <el-date-picker
                  class="mr10 it350"
                  v-model="modelDate.signedTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
              <el-form-item
                label=""
                class="clear_item-margin-bottom"
                style="margin-left: 120px"
              >
                <el-button @click="selects()" type="primary" size="small">
                  <i class="el-icon-search" style="margin-left: -5px"></i> 查询
                </el-button>
                <el-button @click="reset" type="primary" plain size="small">
                  <i class="fa fa-mail-reply" style="margin-left: -5px"></i>
                  清除
                </el-button>
              </el-form-item>
            </el-form>
          </section>
        </section>
      </el-col>
    </el-row>
    <section class="table">
      <div class="tab-header"></div>
      <el-table
        v-loading="loading"
        id="table"
        ref="multipleTable"
        :data="systemLog.list"
        tooltip-effect="dark"
        style="width: 100%"
        border
        stripe
        :header-cell-style="{
          background: '#f5f5f5',
          color: '#666'
        }"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
          header-align="center"
        ></el-table-column>

        <el-table-column
          label="所属应用"
          prop="appName"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_time"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="100"
          prop="log_type"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          label="用户名"
          prop="userName"
          align="center"
          header-align="center"
        >
        </el-table-column>
      </el-table>

      <div class="pagess">
        <el-pagination
          style="float:right;display:block"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="systemLog.currPage"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          layout="total,sizes,prev, pager, next,jumper"
          :total="systemLog.totalRow"
          :loading="loading"
          :page-count="systemLog.totalPage"
        ></el-pagination>
      </div>
    </section>
  </div>
</template>

<script>
import Status from "@/libs/status";
import { mapGetters, mapState } from "vuex";
import PageLayout from "@/components/page-layout";
import Api from "api/api";

export default {
  name: "oplog",
  mounted() {
    // this.$store.dispatch("updateSearchBtn", 2).then(ret => {});
    this.$store.dispatch("appListUsingPOSTS", {}).then(ret => {});
    this.getList(1);
  },
  data() {
    return {
      carStatus: Status.carStatus,
      loading: false,
      tree: {
        placeholder: "模糊搜索",
        props: {
          value: "id", // ID字段名
          label: "label", // 显示名称
          children: "children" // 子级字段名
        },
        accordion: true,
        clearable: true
      },
      selectRow: [],
      nameList: [],
      modelDate: {
        signedTime: "",
        startTime: "",
        endTime: "",
        pageNumber: 1,
        pageSize: 10, //条数
        logType: "",
        createBy: "",
        createName: "",
        app: ""
      }
    };
  },
  computed: {
    ...mapGetters({
      showSearchPanel: "showSearchPanel",
      carInsurance: "carInsurance",
      systemLog: "systemLog",
      syncDept: "syncDept",
      syncDeptLevel: "syncDeptLevel",
      syncUser: "syncUser",
      appList: "appList"
    })
  },
  methods: {
    handleSizeChange(val) {
      this.modelDate.pageSize = val;
      this.modelDate.pageNumber = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.modelDate.pageNumber = val;
      this.getList(val);
    },
    /**
     * 获取记录列表
     * 参数 p: 页码
     * */
    getList(val) {
      // this.loading = true;
      console.log("this.systemLog.list", this.systemLog.list);
      this.modelDate.startTime = this.modelDate.signedTime[0];
      this.modelDate.endTime = this.modelDate.signedTime[1];
      this.$store
        .dispatch("appSystemLog", { systemLogSearch: this.modelDate })
        .then(res => {
          // this.loading = false;
        });
    },

    //重置
    reset() {
      this.modelDate = {
        signedTime: "",
        startTime: "",
        endTime: "",
        pageNumber: 1,
        pageSize: 10, //条数
        logType: "",
        createBy: "",
        createName: "",
        app: ""
      };
      this.getList(1);
    },
    selects() {
      this.modelDate.pageNumber = 1;
      this.getList(1);
    }
  },
  watch: {},
  components: {}
};
</script>
<style lang="less" scoped>
.ar-archives {
  i {
    font-style: normal;
  }

  font-size: 15px;
  box-sizing: border-box;

  .section {
    border: 1px solid #e9e9e9;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
  }

  .header {
    line-height: 50px;
    border-bottom: 1px solid #e9e9e9;
    padding: 0 20px;
    font-weight: 600;
  }

  .content {
    padding: 15px;
    align-items: center;
    display: flex;

    .sel-int {
      display: flex;
      width: 35%;
      position: relative;
      margin-right: 5%;

      & > span {
        width: 95px;
        line-height: 35px;
      }

      .el-tree {
        position: absolute;
        left: 76px;
        min-width: 160px;
        z-index: 999;
        right: 1px;
        // bottom: -26px;
        top: 7px;
        max-height: 200px;
        overflow-y: auto;
        min-height: 30px;
      }

      // margin: 0 10px;
      .input-all {
        .el-input__inner {
          height: 35px;
        }
      }

      .el-select {
        width: 100%;
      }

      .query-el-input {
      }

      span {
        color: #666;
      }

      .sel-sel {
        // margin: 0 10px;
        width: 100%;

        .el-input__inner {
          height: 35px;
        }
      }
    }

    .btn1 {
      text-align: right;
      // width: calc(~"30% - 60px");
      width: 20%;
      box-sizing: border-box;

      .el-date-editor {
        width: 100%;
      }

      el-button {
        background: #0079fe;
        color: #fff;
        cursor: pointer;
        outline: none;
        border: none;

        i {
          font-weight: 700;
        }

        transition: 0.4s;

        &:hover {
          background: #4a9de4;
        }

        &:nth-child(2) {
          margin-left: 10px;
          background: #fff;
          color: #999;
          transition: 0.4s;

          &:hover {
            color: #0079fe;
            border-color: #0079fe;
          }
        }
      }
    }
  }

  .table {
    margin-top: 15px;
    padding: 0 20px;
    border: 1px solid #e9e9e9;
    height: auto;
    min-height: 100px;
    background: #fff;
    padding-left: 20px;
    box-sizing: border-box;

    .tab-header {
      display: flex;
      height: 20px;
      align-items: center;
      justify-content: space-between;

      .right2 {
        // margin-right: 15px;
      }

      .btns {
        margin-right: 8px;
      }

      .btn1 {
        el-button {
          background: #fff;
          color: #999;
          cursor: pointer;
          outline: none;

          i {
            font-weight: 700;
          }

          transition: 0.4s;

          &:hover {
            color: #0079fe;
            border-color: #0079fe;
          }

          &:nth-child(2) {
            margin-left: 8px;
            background: #0079fe;
            color: #fff;
            transition: 0.4s;

            &:hover {
              background: #4a9de4;
            }
          }
        }
      }
    }

    .pagess {
      height: 50px;
      padding: 30px 0;
      margin-right: -4px;

      .el-pagination {
        // border: none;
      }

      .el-pagination__sizes {
        margin-right: 0;
      }

      .el-icon-more,
      .number {
        border: 1px solid #e6e6e6;
        width: 35px;
        height: 35px;
      }
    }
  }
}
</style>
<style lang="less">
.ar-archives .content .sel-int {
  width: 96px;
}
.pagess {
  .el-pager {
    li {
      margin-left: 4px;
      line-height: 35px;
    }
  }

  .btn-next {
    margin-left: 4px !important;
    line-height: 35px;
  }

  .number,
  .el-icon-d-arrow-right,
  .el-icon-d-arrow-left,
  .el-icon-more,
  .btn-prev,
  .btn-next {
    border: 1px solid #e6e6e6 !important;
    width: 35px !important;
    height: 35px !important;
    color: #999999;
    border-radius: 3px;
  }

  .active {
    border: none;
    background: #3399ff !important;
    color: #fff !important;
  }

  .el-pagination {
    .el-input__inner {
      height: 35px !important;
    }
  }
}
</style>
